import { Component } from 'react';
import PropTypes from 'prop-types';
import { get } from 'lodash';
import { connect } from 'dva';
import { Icon, Modal, Divider, Card } from 'antd';
import DescriptionList from 'components/DescriptionList';

const { Description } = DescriptionList;

class ProfileModal extends Component {
  componentDidMount() {
    const { customerId } = this.props;
    this.handleFetchProfile(customerId);
    this.hadnleFetchStudy(customerId);
  }

  componentWillReceiveProps(nextProps) {
    const { customerId } = nextProps;
    const { customerId: oldCustomerId } = this.props;

    if (customerId !== oldCustomerId) {
      this.handleFetchProfile(customerId);
      this.hadnleFetchStudy(customerId);
    }
  }

  hadnleFetchStudy = customerId => {
    if (!customerId) {
      return;
    }

    this.props.dispatch({
      type: 'customers/fetchStudy',
      payload: customerId,
    });
  };

  handleFetchProfile = customerId => {
    if (!customerId) {
      return;
    }

    this.props.dispatch({
      type: 'customers/fetch',
      payload: customerId,
    });
  };

  render() {
    const { profile, loading, onCancel, study } = this.props;

    return (
      <Modal
        title={
          <>
            <Icon type="profile" />
            &nbsp;&nbsp;客户信息
          </>
        }
        width={'80%'}
        style={{ maxWidth: 1024, minWidth: 780 }}
        onCancel={onCancel}
        loading={loading}
        visible={true}
        maskClosable={true}
        footer={null}>
        <Card bordered={false}>
          <DescriptionList size="large" title="客户资料" style={{ marginBottom: 32 }}>
            <Description term="客户头像">
              <img src={get(profile, 'social.avatar', '')} width="60" alt="" />
            </Description>
            <Description term="客户昵称">{get(profile, 'social.nickname', '--')}</Description>
            <Description term="电话号码">{get(profile, 'phone', '--')}</Description>
            <Description term="注册时间">{get(profile, 'createdAt', '--')}</Description>
          </DescriptionList>
          <Divider style={{ marginBottom: 32 }} />
          <DescriptionList size="large" title="宝宝资料" style={{ marginBottom: 32 }}>
            <Description term="宝宝头像">
              <img src={get(profile, 'avatar', '')} width="60" alt="" />
            </Description>
            <Description term="宝宝昵称">{get(profile, 'nickname', '--')}</Description>
            <Description term="宝宝性别">{get(profile, 'gender', '--')}</Description>
            <Description term="宝宝生日">{get(profile, 'birthday', '--')}</Description>
            {/* <Description term="关注状态">{getStatusDesc(get(profile, 'status', 1))}</Description> */}
          </DescriptionList>
          <Divider style={{ marginBottom: 32 }} />
          <DescriptionList size="large" title="学习状态" style={{ marginBottom: 32 }}>
            <Description term="评测结果">{get(study, 'testLevel', '--')}</Description>
            <Description term="在读Level">L{get(study, 'currentLevel', '--')}</Description>
            <Description term="累计阅读量">{get(study, 'wordCount', '--')}</Description>
          </DescriptionList>
        </Card>
      </Modal>
    );
  }
}

if (process.env.UMI_ENV !== 'prod') {
  ProfileModal.propTypes = {
    onCancel: PropTypes.func.isRequired,
    dispatch: PropTypes.func.isRequired,
    profile: PropTypes.object.isRequired,
    study: PropTypes.object.isRequired,
    loading: PropTypes.bool.isRequired,
    customerId: PropTypes.number.isRequired,
  };
}

ProfileModal.defaultProps = {
  dispatch: () => {},
  onCancel: () => {},
  profile: {},
  study: {},
  loading: false,
  customerId: 0,
};

function mapStateToProps(state, ownProps) {
  const { profile, study } = state.customers;
  const { customerId } = ownProps;
  return {
    study,
    profile,
    customerId,
    loading: state.loading.effects['customers/fetch'],
  };
}

export default connect(mapStateToProps)(ProfileModal);
